<template>
	<view class="tail-every">
		<view class="tail-ul">
			<view class="tail-li" :class="{active: store.isactive==1}" @click="gotopage(1)">
				<view class="tail-a">
					<text class="iconfont icon-zhuye tail-icon"></text>
					<text class="tail-text">主页</text>
				</view>
			</view>
			<view class="tail-li " :class="{active: store.isactive==2}" @click="gotopage(2)">
				<view class="tail-a">
					<text class="iconfont icon-kouyulangdu tail-icon"></text>
					<text class="tail-text">书架</text>
				</view>
			</view>
			<view class="tail-li " :class="{active: store.isactive==3}" @click="gotopage(3)">
				<view class="tail-a">
					<text class="iconfont icon-liaotian tail-icon"></text>
					<text class="tail-text">AI</text>
				</view>
			</view>
			<view class="tail-li " :class="{active: store.isactive==4}" @click="gotopage(4)">
				<view class="tail-a">
					<text class="iconfont icon-wode1 tail-icon"></text>
					<text class="tail-text">我的</text>
				</view>
			</view>
			<view class="tail-indicator">

			</view>
		</view>
	</view>
</template>

<script setup>
	import '@/common/iconfont.css'
	import {
		useTailStore
	} from '../../common/tail/tail.js';
	import { ref, onMounted } from 'vue';
	import { onLaunch } from '@dcloudio/uni-app';

	const store = useTailStore();
	// 定义 pages 配置（和 pages.json 保持一致，也可单独维护）
	const pageList = [{
			path: "/pages/index/index"
		},
		{
			path: "/pages/bookshelf/bookshelf"
		},
		{
			path: "/pages/aichat/aichat"
		},
		{
			path: "/pages/my/my"
		}
	];

	function gotopage(i) {
		store.changeactive(i);
		const targetPath = pageList[i - 1].path;
		// console.log('跳转路径:', targetPath);
		
		// 使用switchTab而不是redirectTo，保持底部导航栏状态
		uni.switchTab({
			url: targetPath,
			fail: (err) => {
				// 如果switchTab失败（可能页面不在tabBar中），则使用redirectTo
				uni.redirectTo({
					url: targetPath
				});
			}
		});
	}
	
	onMounted(()=>{
		console.log("导航栏加载")
	})
	
	onLaunch(() => {
	  uni.hideTabBar({
	    animation: true,
	    success: () => {
	      console.log('隐藏 tabBar 成功');
	    },
	    fail: (err) => {
	      console.error('隐藏 tabBar 失败:', err);
	    }
	  });
	});
</script>

<style lang="scss">
	@import '/common/common.scss';

	.tail-every {
		position: fixed;
		bottom: 0px;
		width: 100vw;
		height: 70px;
		background-color: aliceblue;
		// background-color: #74ffef;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		z-index: 999;

		.tail-ul {
			display: flex;
			width: 360px;

			.tail-li {
				position: relative;
				list-style: none;
				width: 90px;
				height: 70px;
				z-index: 1;
				// background-color: #74ffef;

				.tail-a {
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					width: 100%;
					text-align: center;
					font-weight: 500;

					.tail-icon {
						position: relative;
						display: block;
						line-height: 75px;
						font-size: 1.5em;
						text-align: center;
						transition: 0.5s;
						color: black;
					}

					.tail-text {
						position: absolute;
						color: black;
						font-weight: 400;
						font-size: 0.75em;
						letter-spacing: 0.05em;
						transition: 0.5s;
						opacity: 0;
						transform: translateY(20px);
					}
				}
			}

			.tail-indicator {
				position: absolute;
				margin-left: 14px;
				margin-top: -30px;
				width: 50px;
				height: 50px;
				background: aqua;
				border-radius: 50%;
				border: 6px solid var(--bg-color);
				transition: 0.5s;

				&:before {
					content: '';
					position: absolute;
					left: -21.5px;
					top: 24px;
					width: 18px;
					height: 18px;
					background: var(--tail-color);
					border-top-right-radius: 20px;
					box-shadow: 0px -8px 0 0 var(--bg-color);
				}

				&:after {
					content: '';
					position: absolute;
					right: -21px;
					top: 24px;
					width: 18px;
					height: 18px;
					background: var(--tail-color);
					border-top-left-radius: 20px;
					box-shadow: 0px -8px 0 0 var(--bg-color);
				}
			}
		}
	}

	// .tail-every .tail-ul .tail-li:nth-child(0).active~.tail-indicator {
	// 	transform: translateX(calc(109.5px * 0));
	// }
	.tail-every .tail-ul .tail-li:nth-child(1).active~.tail-indicator {
		transform: translateX(calc(90px * 0));
	}

	.tail-every .tail-ul .tail-li:nth-child(2).active~.tail-indicator {
		transform: translateX(calc(90px * 1));
	}

	.tail-every .tail-ul .tail-li:nth-child(3).active~.tail-indicator {
		transform: translateX(calc(90px * 2));
	}

	.tail-every .tail-ul .tail-li:nth-child(4).active~.tail-indicator {
		transform: translateX(calc(90px * 3));
	}

	.tail-every .tail-ul .tail-li.active .tail-a .tail-icon {
		transform: translateY(-35px);
	}

	.tail-every .tail-ul .tail-li.active .tail-a .tail-text {
		opacity: 1;
		transform: translateY(5px);
	}
</style>